<ui:composition template="/WEB-INF/template.xhtml"
                xmlns="http://www.w3.org/1999/xhtml"
                xmlns:h="http://xmlns.jcp.org/jsf/html"
                xmlns:ui="http://xmlns.jcp.org/jsf/facelets"
                xmlns:p="http://primefaces.org/ui"
                xmlns:f="http://xmlns.jcp.org/jsf/core"
                xmlns:c="http://xmlns.jcp.org/jsp/jstl/core">

    <ui:define name="head">
        <link rel="stylesheet" type="text/css" href="/MeteoCal/resources/css/home.css" />
        <title>Personal Page</title>
    </ui:define>
    <ui:define name="content">
        <div id="calHeaderBox">
            <div style="float: left;">
                <div id="calTitle">
                    <p:outputLabel value="Personal Events" />
                </div>
                <div id="funcBox">
                    <div id="calendarScope">
                        <p:commandLink title="Toggle private/public calendar" action="#{userBean.toggleCalendarScope()}" >
                            <p:graphicImage value="/resources/icons/padlock_closed_icon.png" height="30px"
                                            rendered="#{userBean.currentCalendarPrivate}"/>
                            <p:graphicImage value="/resources/icons/padlock_open_icon.png" height="30px"
                                            rendered="#{userBean.currentCalendarPublic}"/>
                        </p:commandLink>
                    </div>
                    <div id="newEvent">
                        <p:link outcome="createModifyEvent" title="Create new event">
                            <p:graphicImage value="/resources/icons/round_plus_icon.png" height="30px" />
                        </p:link>
                    </div>
                </div>
            </div>
        </div>
        <div id="calEventBox">
            <p:dataScroller id="eventsGrid" value="#{userBean.upcomingEvents}" var="event" chunkSize="20">
                <h:form id="miniEventForm">
                    <h:panelGrid columns="4">
                        <p:outputLabel value="#{event.date.toLocaleString()}" />
                        <p:link outcome="eventDetails" value="#{event.name}" >
                            <f:param name="id" value="#{event.eventId}" />
                        </p:link>
                        <h:inputHidden id="eventId" value="#{event.eventId}" />
                        <p:outputPanel rendered="#{userBean.isCreator(event)}">
                            <p:commandLink action="#{miniEventBean.delete()}"
                                           title="Delete event" update=":eventsGrid">
                                <p:graphicImage value="/resources/icons/trash_icon.png" height="20px" />
                            </p:commandLink>
                            <p:link outcome="createModifyEvent" title="Modify event">
                                <f:param name="faces-redirect" value="true" />
                                <f:param name="id" value="#{event.eventId}" />
                                <p:graphicImage value="/resources/icons/wrench_plus_2_icon.png" height="20px" />
                            </p:link>
                            <p:link outcome="invitationList" title="Invite users to this event">
                                <f:param name="faces-redirect" value="true" />
                                <f:param name="eventId" value="#{event.eventId}" />
                                <p:graphicImage value="/resources/icons/mail_2_icon.png" height="20px" />
                            </p:link>
                        </p:outputPanel>
                        <p:outputPanel rendered="#{!userBean.isCreator(event)}">
                            <p:commandLink action="#{miniEventBean.cancelParticipation()}"
                                           title="Cancel participation" update=":eventsGrid">
                                <p:graphicImage value="/resources/icons/round_delete_icon.png" height="20px" />
                            </p:commandLink>
                        </p:outputPanel>
                    </h:panelGrid>
                </h:form>
            </p:dataScroller>
        </div>
    </ui:define>
</ui:composition>